<template>
  <div class="area">
    <!-- 区域/均价 -->
    <div class="areaDetail">
      <div class="areaDetailTop" :class="{ hidden: isShow }">
        <span>区域：</span>
        <div class="areaDetailTop_city">
          <span
            v-for="(item,index) in cityItem.scenics"
            :key="index"
            class="areaDetailTop_city_details"
          >{{ item.name }}</span>
        </div>
      </div>

      <div class="toggle" @click="isShow=!isShow">
        <span></span>
        <div 
        class="el-icon-d-arrow-right" 
        :class="{ toggleItem: isShow }"
        >
        </div>等888个区域
      </div>

      <div class="areaDetailBottom">
        <span>
          <p>均价</p>
          <el-tooltip
            class="item"
            effect="dark"
            content="等级均价由平日价格计算得出，节假日价格会有上浮。"
            placement="bottom-start"
          >
            <em>?</em>
          </el-tooltip>：
        </span>

        <el-tooltip
          class="item"
          effect="dark"
          content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
          placement="bottom-start"
        >
          <div class="rating">
            <div class="iconfont icon-huangguan"></div>
            <div class="iconfont icon-huangguan"></div>
            <div class="iconfont icon-huangguan"></div>
            <div class="iconfont icon-huangguan"></div>
            <div class="iconfont icon-huangguan"></div>
            <span>¥332</span>
          </div>
        </el-tooltip>

        <el-tooltip
          class="item"
          effect="dark"
          content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
          placement="bottom-start"
        >
          <div class="rating">
            <div class="iconfont icon-huangguan"></div>
            <div class="iconfont icon-huangguan"></div>
            <div class="iconfont icon-huangguan"></div>
            <div class="iconfont icon-huangguan"></div>
            <div class="iconfont icon-huangguan"></div>
            <span>¥332</span>
          </div>
        </el-tooltip>

        <el-tooltip
          class="item"
          effect="dark"
          content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
          placement="bottom-start"
        >
          <div class="rating">
            <div class="iconfont icon-huangguan"></div>
            <div class="iconfont icon-huangguan"></div>
            <div class="iconfont icon-huangguan"></div>
            <div class="iconfont icon-huangguan"></div>
            <div class="iconfont icon-huangguan"></div>
            <span>¥332</span>
          </div>
        </el-tooltip>
      </div>
    </div>

    <!-- 地图 -->
    <div id="container"></div>
  </div>
</template>

<script>
export default {
  props: ["cityItem"],

  data() {
    return {
      // 切换显示/隐藏城市标识
      isShow: true
    };
  },

  // 高德地图
  mounted() {
    // 2.地图库加载完毕的回调函数
    window.onLoad = function() {
      var map = new AMap.Map("container", {
        zoom: 17, //级别
        center: [113.3245904, 23.1066805], //中心点坐标
        viewMode: "3D" //使用3D视图
      });
    };

    // 1.加载高德地图库
    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=1d2a4f11df5502f6f56e25d11e602ab3&callback=onLoad";
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  }
};
</script>

<style lang="less" scoped>
.area {
  display: flex;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 12px 2px;
  color: #333;

  .areaDetail {
    flex: 1;
    padding: 0px 10px;

    .hidden {
      height: 42px;
      overflow:hidden;
    }

    .areaDetailTop {
      display: flex;
      justify-content: space-between;

      > span {
        width: 12.5%;
      }

      .areaDetailTop_city {
        flex: 1;

        &_details {
          margin-right: 10px;
        }
      }
    }

    .toggle {
      display: flex;
      margin-top: 10px;
      cursor: pointer;

      > span {
        width: 12.5%;
      }

      .el-icon-d-arrow-right {
        position: relative;
        color: #ff9917;
        padding-right: 12px;
        transform: rotate(-90deg);
        top: -6px;
        left: -4px;
      }

      .toggleItem{
         position: relative;
        transform: rotate(90deg);
        top: 8px;
        left: -10px;
      }
    }

    .areaDetailBottom {
      display: flex;
      margin-right: 20px;
      margin-top: 20px;
      position: relative;

      > span {
        display: flex;
        width: 12.5%;

        > p {
          margin-right: 16px;
        }

        em {
          position: absolute;
          background-color: #ccc;
          width: 14px;
          height: 14px;
          line-height: 14px;
          text-align: center;
          border-radius: 50%;
          color: #fff;
          font-size: 12px;
          left: 34px;
          top: 0px;
        }
      }

      .rating {
        display: flex;
        line-height: 20px;
        margin-right: 20px;

        .icon-huangguan {
          color: #ff9900;
          font-size: 18px;
        }

        > span {
          margin-left: 6px;
        }
      }
    }
  }

  #container {
    width: 400px;
    height: 250px;
  }
}
</style>